<ng-container *ngIf="(networkProperties | async) as props">
  <mat-tab-group dynamicHeight animationDuration="0ms">
    <!-- <mat-tab label="Chart">
      <ng-container [ngSwitch]="(loadingObservable | async) || (chartLoadingObservable | async)">
        <p *ngSwitchCase="true">Loading chart...</p>

        <ng-container *ngSwitchDefault>
          <div *ngIf="(chartDataObservable | async) as chartOptions"
               class="historical-balance-chart">
            <highcharts-chart class="historical-balance-highcharts-chart"
                              [Highcharts]="Highcharts"

                              [constructorType]="chartConstructor"
                              [options]="chartOptions"
                              [callbackFunction]="chartCallback"

                              [(update)]="updateFlag"
                              [oneToOne]="oneToOneFlag"

                              style="width: 1220px; height: 300px; display: block; max-width: 100%;">
            </highcharts-chart>
          </div>
        </ng-container>
      </ng-container>
    </mat-tab> -->

    <mat-tab label="Table">
      <ng-container *ngIf="(balancesObservable | async) as dataSource">
        <table mat-table [dataSource]="dataSource" [trackBy]="track">

          <ng-container matColumnDef="blockNumber">
            <th mat-header-cell *matHeaderCellDef>Block</th>
            <td mat-cell *matCellDef="let item">
              <a [routerLink]="'../../block/' + item.event.blockNumber">{{item.event.blockNumber}}</a>
            </td>
          </ng-container>

          <ng-container matColumnDef="total">
            <th mat-header-cell *matHeaderCellDef>Total</th>
            <td mat-cell *matCellDef="let item">
              <balance [tokenDecimals]="props.tokenDecimals" [tokenSymbol]="props.tokenSymbol"
                       [value]="$any(item.balances | async)?.total"></balance>
            </td>
          </ng-container>

          <ng-container matColumnDef="free">
            <th mat-header-cell *matHeaderCellDef>Free</th>
            <td mat-cell *matCellDef="let item">
              <balance [tokenDecimals]="props.tokenDecimals" [tokenSymbol]="props.tokenSymbol"
                       [value]="$any(item.balances | async)?.free"></balance>
            </td>
          </ng-container>

          <ng-container matColumnDef="reserved">
            <th mat-header-cell *matHeaderCellDef>Reserved</th>
            <td mat-cell *matCellDef="let item">
              <balance [tokenDecimals]="props.tokenDecimals" [tokenSymbol]="props.tokenSymbol"
                       [value]="$any(item.balances | async)?.reserved"></balance>
            </td>
          </ng-container>

          <ng-container matColumnDef="transferable">
            <th mat-header-cell *matHeaderCellDef>Transferable</th>
            <td mat-cell *matCellDef="let item">
              <balance [tokenDecimals]="props.tokenDecimals" [tokenSymbol]="props.tokenSymbol"
                       [value]="$any(item.balances | async)?.transferable"></balance>
            </td>
          </ng-container>

          <ng-container matColumnDef="locked">
            <th mat-header-cell *matHeaderCellDef>Locked</th>
            <td mat-cell *matCellDef="let item">
              <balance [tokenDecimals]="props.tokenDecimals" [tokenSymbol]="props.tokenSymbol"
                       [value]="$any(item.balances | async)?.locked"></balance>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="visibleColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let myRowData; columns: visibleColumns"></tr>

        </table>

        <div *ngIf="(loadingObservable | async) === false && dataSource.length === 0">
          <ng-container [ngSwitch]="pageLiveObservable | async">
            <ng-container *ngSwitchCase="true">
              No items. Waiting for new blocks.
            </ng-container>
            <ng-container *ngSwitchDefault>
              No items found.
            </ng-container>
          </ng-container>
        </div>

      </ng-container>
    </mat-tab>
  </mat-tab-group>

  <div *ngIf="loadingObservable | async">
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  </div>

  <div>
    <ng-container *ngIf="(hasNextPageObservable | async)">
      <button [disabled]="(loadingObservable | async)" mat-stroked-button aria-label="Next"
              (click)="loadMoreItems()">
        <ng-container *ngIf="(searchInfoObservable | async) as searchInfo">
          <ng-template #showMore>Show More</ng-template>
          <ng-container *ngIf="searchInfo.endOfBlockRange; else showMore">
            Increase search range
          </ng-container>
        </ng-container>
        <mat-icon>expand_more</mat-icon>
      </button>
    </ng-container>

    <ng-container class="list-block-range" *ngIf="(pageLiveObservable | async) === false">
      <ng-container *ngIf="(searchInfoObservable | async) as searchInfo">
        <span class="list-block-range" *ngIf="searchInfo.fromBlock">
          Search range: Blocks {{ searchInfo.fromBlock }} - {{ searchInfo.toBlock }}
        </span>
      </ng-container>
    </ng-container>
  </div>
</ng-container>
